<template>
	<view>
		<view class="card">
			<view style="display: flex;align-items: center;width: 90%;" v-if="userInfo.phone" @click="toDetail">
				<image :src="userInfo.image || avatarUrl" alt="" />
				<view style="display: flex;align-items: left;flex-direction: column;width: 80%;">
					<view class="name">{{userInfo.name}}</view>
					<view class="phone">{{getPhoneText(userInfo.phone)}}</view>
				</view>
			</view>
			<view style="display: flex;align-items: center;" v-else>
				<image :src="avatarUrl" alt="" />
				<view style="display: flex;flex-direction: column;" @click="toLogin">
					<view class="name">注册/登录</view>
					<view class="phone">登陆后才能享受完整服务</view>
				</view>
			</view>
			<image style="width: 20px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
		</view>
		<view class="listContainer">
			<view class="vipCard" @click="toVip">
				<view class="vipCardText">
					<image style="width: 25px;height: 25px;" src="../../static/huiyuan.png"></image>
					<view>会员卡</view>
				</view>
				<image style="width: 20px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
			</view>
			<view class="userList">
				<view v-for="(item,index) in list" :key="index" class="userListCard" @click="toView(item)">
					<view class="userListCardText" style="width: 90%;">
						<view style="width: 25px;height: 25px;margin-right: 10px;">
							<image style="width: 100%;height: 100%;" :src="item.img" alt=""></image>
						</view>
						<view v-if="item.key !== 3" style="width: calc(100% - 40px);">{{item.title}}</view>
						<view v-else style="width: calc(100% - 40px);"><button open-type="contact" type="default" class="kefuClass">{{item.title}}</button></view>
					</view>
					<image style="width: 20px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
				</view>
				
			</view>
			<view @click="removeToken" class="removeToken">注销登录</view>
		</view>
	</view>
</template>

<script>
	import { getUserInfo } from '@/api/home.js'
	export default {
		data() {
			return {
				userInfo:{
					vip_card_balance:'',
					phone:'',
					name:''
				},
				avatarUrl:"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
				list: [
					{title:'优惠券',key:1,url:'/pages/userCoupon/index',img:'../../static/wodeyouhuiquan.png'},
					{title:'地址管理',key:1,url:'/pages/address/index',img:'../../static/dizhiguanli.png'},
					{title:'在线客服',key:3,img:'../../static/zaixiankefu.png'},
					{title:'常见问题',key:1,url:'/pages/problem/index',img:'../../static/changjian.png'},
					{title:'关于我们',key:1,url:'/pages/aboutAs/index',img:'../../static/guanyuwomen.png'},
				]
			}
		},
		onShow() {
			getUserInfo().then(res=>{
				this.userInfo = res.data
				if(res.data.is_show_invite) {
					let flag = this.list.find(item=>{return item.title === '邀请赚钱'})
					if(!flag) this.list.push({title:'邀请赚钱',key:1,url:'/pages/invited/index',img:'../../static/yaoqing.png'})
				}
			})
		},
		methods:{
			getPhoneText(tel) {
				const reg = /^(\d{3})(\d{4})(\d{4})$/
				const a = tel.replace(reg, "$1****$2")
				return a
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/userDetail/index'
				})
			},
			toLogin() {
				uni.redirectTo({
					url: '/pages/logs/index'
				})
			},
			toView(item) {
				if(item.url) uni.navigateTo({
					url: item.url
				})
			},
			toVip() {
				uni.navigateTo({
					url: '/pages/vip/index?balance='+this.userInfo.vip_card_balance
				})
			},
			removeToken() {
				uni.removeStorageSync('token')
				uni.redirectTo({
					url: '/pages/logs/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.kefuClass::after {
		border: none;
		height: 0!important;
	}
	.kefuClass {
		position: relative;
		text-align: left;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000;
		font-size: 15px;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}
	.listContainer{
		padding: 10px;
		.removeToken{
			text-align: center;
			/* color: #989898; */
			font-size: 15px;
			margin-top: 10px;
			width: 100%;
			background: #fff;
			padding: 12px;
			box-sizing: border-box;
			border-radius: 4px;
		}
		.userList{
			margin-top: 10px;
			.userListCard{
				background-color: #fff;
				border-radius: 4PX;
				padding: 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				::after{
					content: '';
					position: absolute;
					width: 92%;
					height: 1px;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					background-color: #f5f5f5;
				}
				.userListCardText{
					display: flex;
					align-items: center;
					font-size: 15px;
					image{
						margin-right: 10px;
					}
				}
			}
		}
		.vipCard{
			background-color: #fff;
			border-radius: 4PX;
			padding: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.vipCardText{
				display: flex;
				align-items: center;
				font-size: 15px;
				image{
					margin-right: 10px;
				}
			}
		}
	}
	.card{
		background: #fff;
		padding: 15px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		image{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 15px;
		}
		.name{
			font-size: 15px;
		}
		.phone{
			font-size: 13px;
			margin-top: 5px;
		}
	}
</style>